import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

const List<String> lunch = ['早餐', '中餐', '晚餐', '其他'];

class CaloricList extends StatelessWidget {
  const CaloricList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: HYSizeFit.screenWidth,
      height: 103.rpx,
      padding: EdgeInsets.only(left: 20.rpx),
      margin: EdgeInsets.only(bottom: 26.rpx),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: lunch.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.only(right: 37.rpx),
            child: Column(
              children: [
                Image.asset(
                  'assets/images/good0$index.png',
                  width: 72.rpx,
                  height: 72.rpx,
                ),
                SizedBox(height: 12.rpx),
                Text(
                  lunch[index],
                  style: TextStyle(
                    color: const Color(0xff384144),
                    fontSize: 14.rpx,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

const List<Map<String, dynamic>> caloric = [
  {'name': '蛋白质', 'ke': 160},
  {'name': '碳水', 'ke': 214},
  {'name': '脂肪', 'ke': 63},
];

const List<double> week = [0.3, 0.6, 0.5, 0.4, 0.2, 0.8, 0.33];

class YellowCaloric extends StatelessWidget {
  const YellowCaloric({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: HYSizeFit.screenWidth - 16.rpx,
      height: HYSizeFit.screenHeight - 335.rpx,
      margin: EdgeInsets.only(left: 8.rpx, right: 8.rpx),
      padding: EdgeInsets.only(top: 44.rpx),
      decoration: BoxDecoration(
        color: const Color(0xffFBC508),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.rpx),
          topRight: Radius.circular(30.rpx),
        ),
      ),
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(left: 28.rpx, right: 27.rpx),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '今日摄入',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.rpx,
                      ),
                    ),
                    Image.asset(
                      'assets/images/white_arr.png',
                      height: 13.rpx,
                    ),
                  ],
                ),
                SizedBox(height: 29.rpx),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      width: 109.rpx,
                      height: 106.rpx,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('assets/images/cired.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            'Kcal left',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12.rpx,
                            ),
                          ),
                          SizedBox(height: 3.rpx),
                          Text(
                            '2145',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20.rpx,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Column(
                      children: List.generate(
                        caloric.length,
                        (index) {
                          return _caloric(
                            t1: caloric[index]['name'],
                            t2: caloric[index]['ke'],
                            index: index,
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              width: double.infinity,
              height: double.infinity,
              margin: EdgeInsets.only(top: 44.rpx),
              padding:
                  EdgeInsets.only(top: 38.rpx, left: 31.rpx, right: 25.rpx),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(25.rpx),
                  topLeft: Radius.circular(25.rpx),
                ),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Statistics',
                        style: TextStyle(
                          color: const Color(0xff384144),
                          fontSize: 20.rpx,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Container(
                        width: 96.rpx,
                        height: 36.rpx,
                        decoration: BoxDecoration(
                          border: Border.all(
                              color: const Color(0xffF77800), width: 1.rpx),
                          borderRadius: BorderRadius.circular(6.rpx),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              '一周',
                              style: TextStyle(
                                color: const Color(0xff384144),
                                fontSize: 14.rpx,
                              ),
                            ),
                            SizedBox(width: 16.rpx),
                            Image.asset(
                              'assets/images/red_arr.png',
                              height: 8.rpx,
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 34.rpx),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: List.generate(
                      week.length,
                      (index) {
                        return Column(
                          children: [
                            Container(
                              width: 6.rpx,
                              height: 78.rpx,
                              margin: EdgeInsets.only(bottom: 15.rpx),
                              alignment: Alignment.bottomCenter,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(3.rpx),
                                color:
                                    const Color(0xffF77800).withOpacity(0.22),
                              ),
                              child: Container(
                                width: 6.rpx,
                                height: 78.rpx * week[index],
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(3.rpx),
                                  color: const Color(0xffF77800),
                                ),
                              ),
                            ),
                            Text(
                              '${index + 1}',
                              style: TextStyle(
                                color: const Color(0xff384144),
                                fontSize: 14.rpx,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _caloric({t1, t2, index}) {
    return Container(
      width: 182.rpx,
      height: 20.rpx,
      margin: EdgeInsets.only(top: index == 0 ? 0 : 14.rpx),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 55.rpx,
            child: Text(
              t1 ?? '',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.rpx,
              ),
            ),
          ),
          Expanded(
            child: Container(
              width: 83.rpx,
              height: 4.rpx,
              alignment: Alignment.centerLeft,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(2.rpx),
              ),
              child: Container(
                height: 4.rpx,
                width: 83.rpx * (t2 / 240),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(2.rpx),
                  color: const Color(0xffF77800),
                ),
              ),
            ),
          ),
          SizedBox(
            width: 44.rpx,
            child: Align(
              alignment: Alignment.centerRight,
              child: Text(
                '$t2 g',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.rpx,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
